import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';

import type { OnActionClickFn } from '#/adapter/vxe-table';
import type { MenuItem } from '#/api/system/models';

/**
 * 获取表格列配置。
 * @param onActionClick 表格操作按钮点击事件
 */
export function useColumns(
  onActionClick?: OnActionClickFn<MenuItem>,
): VxeTableGridOptions<MenuItem>['columns'] {
  return [
    { type: 'seq', width: 80 },
    {
      field: 'title',
      title: '菜单名称',
      width: 200,
      treeNode: true,
      align: 'left',
    },
    {
      field: 'icon',
      title: '图标',
      width: 60,
      slots: { default: 'icon' },
    },
    {
      field: 'type',
      title: '类型',
      width: 100,
      cellRender: {
        name: 'CellTag',
        options: [
          { color: '', label: '目录', value: 0 },
          { color: 'blue', label: '菜单', value: 1 },
          { color: 'cyan', label: '按钮', value: 2 },
        ],
      },
    },
    { align: 'left', field: 'path', title: '路由地址', width: 180 },
    { align: 'left', field: 'component', title: '组件路径', minWidth: 280 },
    {
      field: 'status',
      title: '状态',
      width: 100,
      cellRender: { name: 'CellTag', attrs: { useStatus: true } },
    },
    {
      cellRender: {
        attrs: {
          nameField: 'title',
          nameTitle: '菜单',
          onClick: onActionClick,
        },
        name: 'CellOperation',
        options: ['edit', 'delete'],
      },
      field: 'operation',
      fixed: 'right',
      title: '操作',
      width: 120,
    },
  ];
}
